<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Aviato E-Commerce Template">

    <meta name="author" content="">

    <title>Aviato | E-commerce template</title>

    <!-- Mobile Specific Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../images/favicon.png"/>

    <!-- Themefisher Icon font -->
    <link rel="stylesheet" href="../../plugins/themefisher-font/style.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick-theme.css"/>

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../../css/style.css">

</head>

<body id="body">

<!-- Start Top Header Bar -->
<jsp:include page="common/top-header.jsp"/>
<!-- End Top Header Bar -->


<!-- Main Menu Section -->
<jsp:include page="common/main-menu.jsp"/>

<section class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content">
                    <h1 class="page-name">Shop</h1>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="products section">
    <div class="container">
        <div class="row">

            <c:forEach items="${products}" var="pro">
                <div class="col-md-4">
                    <div class="product-item">
                        <div class="product-thumb">
                            <img class="img-responsive" src="${pro.img}" alt="product-img"/>
                            <div class="preview-meta">
                                <ul>
                                    <li>
									<span data-toggle="modal" data-target="#product-modal" onclick="findId(${pro.id})">
										<i class="tf-ion-ios-search-strong"></i>
									</span>
                                    </li>
                                    <li>
                                        <a onclick="insertFavorite(${user.u_id},${pro.id})"><i class="tf-ion-ios-heart" ></i></a>
                                    </li>
                                    <li onclick="insertCart(${pro.id})">
                                        <a><i class="tf-ion-android-cart"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="product-content">
                            <h4><a href="favorite.jsp">${pro.name}</a></h4>
                            <p class="price">$${pro.price}</p>
                        </div>
                    </div>
                </div>
            </c:forEach>

            <!-- Modal -->
            <jsp:include page="common/modal.jsp"/>
            <!-- /.modal -->
        </div>
    </div>

</section>


<footer class="footer section text-center">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="/shop/shop.do?current_page=${current_page-1}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <c:forEach items="${pages}" var="page" >
                                <li><a href="/shop/shop.do?current_page=${page.current_page}">${page.current_page}</a> </li>
                            </c:forEach>
                            <%--<li><a href="#">1</a></li>--%>
                            <%--<li><a href="#">2</a></li>--%>
                            <%--<li><a href="#">3</a></li>--%>
                            <%--<li><a href="#">4</a></li>--%>
                            <%--<li><a href="#">5</a></li>--%>
                            <li>
                                <a href="/shop/shop.do?current_page=${current_page+1}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>

                <ul class="social-media">
                    <li>
                        <a href="">
                            <i class="tf-ion-social-facebook"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="tf-ion-social-instagram"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="tf-ion-social-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="tf-ion-social-pinterest"></i>
                        </a>
                    </li>
                </ul>
                <ul class="footer-menu">
                    <li>
                        <a href="">CONTACT</a>
                    </li>
                    <li>
                        <a href="">SHIPPING</a>
                    </li>
                    <li>
                        <a href="">TERMS OF SERVICE</a>
                    </li>
                    <li>
                        <a href="">PRIVACY POLICY</a>
                    </li>
                </ul>
                <%--<p class="copyright-text">Powered by Bootstrap / More Templates <a href="http://www.cssmoban.com/"--%>
                <%--target="_blank" title="模板之家">模板之家</a>--%>
                <%--- Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>--%>

            </div>
        </div>
    </div>
</footer>

<a class="btn btn--success btn--floating box-shadow-wide" target="_blank" href="#products/aviato-e-commerce-template/">
    <span class="btn__text">
        Purchase Full Template Pack
    </span>
</a>


<!--
Essential Scripts
=====================================-->


<!-- Main jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 3.1 -->
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Instagram Feed Js -->
<script src="../../plugins/instafeed.js/instafeed.min.js"></script>
<!-- Slick Carousel -->
<script src="../../plugins/slick-carousel/slick/slick.min.js"></script>
<!-- Google Map js -->


<!-- Main Js File -->
<script src="../../js/script.js"></script>

</body>
</html>
